/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-07-14 11:25:46
 * @LastEditTime : 2023-07-25 09:12:38
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\Assets\Template\ProjectCustom.jsx
 * @Description  :
 */
import { useRequest } from 'ahooks'
import { useEffect, useState } from 'react'
import { Http } from '../../../../Common/Api'
import { ICON } from '../../../../Common/Configure/Icon'
import './Scss/ProjectCustom.scss'

export const ProjectCustom001 = ({ projectUuid, MapClickEvent }) => {
    const [Data, setData] = useState()
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => setData(res),
    })

    useEffect(() => {
        runAsync({ url: 'getProjectCustomData', data: { projectUuid } })
    }, [projectUuid, runAsync])

    return (
        <div className="ProjectCustom001">
            {Data &&
                Data.map(({ uuid, one, two, thr, fou, fiv, six }) => (
                    <div
                        key={uuid}
                        style={{ background: fou, cursor: fiv ? 'pointer' : 'auto' }}
                        onClick={() => {
                            if (six) MapClickEvent.emit({ type: 'jjtCenter', data: { center: six, uuid: uuid } })
                        }}
                    >
                        <div>
                            {fiv && ICON[fiv]} {one}
                        </div>
                        <div>{two}</div>
                        <div>{thr}</div>
                    </div>
                ))}
        </div>
    )
}
